<template>
  <div style="height: 100%;background-color: #01001C;">
    <el-container>
      <el-header>
        <p class="time">{{ times }} {{ times2 }} {{ week }}</p>
        <div class="title">庭审运维管控平台</div>
        <div class="court">
          <span class="el-dropdown-link">
            当前法庭：
          </span>
          <el-select v-model="tribunalCode" placeholder="请选择法庭" @change="handleTribunal">
            <el-option
              v-for="(item,index) in TribunalOptions"
              :key="index + 'tribunal'"
              :label="item.tribunalName"
              :value="item.id"
            />
          </el-select>
        </div>
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="total-item-inner">
                <camera :tribunal="tribunalCode" />
              </div>
            </div>
            <div class="grid-content bg-purple" style="margin-top: 25px;">
              <div class="total-item-inner" style="height:705px">
                <div class="conten">
                  <el-row>
                    <el-col :span="24"><img class="video" src="../../assets/imgs/audio.png"><p style="color:#FFFFFF;font-size:5px;float: left;margin: 13px 43px;">音频监测</p></el-col>
                    <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
                  </el-row>
                  <el-row>
                    <div v-for="(item,index) in cameraList" :key="index+'cameraList'" :class="[item.cStatus ===1 ? 'cameras':'cameras']">
                      <p v-if="item.cStatus ===1" style="margin: 10px 13px;line-height: 8px;font-size: 12px;"> {{ item.name }} </p>
                      <p v-if="item.cStatus ===2" style="color:#F10808;margin: 10px 13px;line-height: 8px;font-size: 12px;"> {{ item.name }} </p>
                      <div style="margin: -9px 7px;float: right;">
                        <div :class="[item.level <= 7 ? 'voiceStyle' : 'highVoice']">0</div>
                        <div :class="[item.level <= 6 ? 'voiceStyle' : 'highVoice']">-6</div>
                        <div :class="[item.level <= 5 ? 'voiceStyle' : 'inSound']">-12</div>
                        <div :class="[item.level <= 4 ? 'voiceStyle' : 'inSound']">-18</div>
                        <div :class="[item.level <= 3 ? 'voiceStyle' : 'lowVoice']">-24</div>
                        <div :class="[item.level <= 2 ? 'voiceStyle' : 'lowVoice']">-30</div>
                        <div :class="[item.level <= 1 ? 'voiceStyle' : 'lowVoice']">-35</div>
                        <div :class="[item.level <= 0 ? 'voiceStyle' : 'lowVoice']">-42</div>
                        <div class="voiceName">
                          <!-- <span v-if="item.mute === 0">{{ item.channelName }}</span> -->
                          <span>0</span>
                        </div>
                      </div>
                      <p v-if="item.cStatus ===1" style="color:#18E115;margin-left: 13px;margin-top: 60px;">在线</p>
                      <p v-if="item.cStatus ===2" style="color:#F10808;margin-left: 13px;margin-top: 60px;">离线</p>
                    </div>
                  </el-row>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <div class="grid-content bg-purple">
              <div class="total-item-inner2">
                <div class="conten">
                  <el-row>
                    <el-col :span="24">
                      <div style="text-align: center;margin: 13px;">
                        <img class="video2" src="../../assets/imgs/equipment.png"><p style="color:#FFFFFF;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;line-height: 8px;">庭审主机</p>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <div class="camera3">
                      <el-row>
                        <el-col :span="12">
                          <div class="grid-content bg-purple2">
                            <div style="transform: translateX(0%) translateY(28%);height: 25px;">庭审主机状态</div><hr style="background-color: rgb(21,46,100);height: 1px;border: none;">
                          </div>
                          <div style="margin-top: -69px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #1CF711;line-height: 48px;border-right: 2px solid rgb(21,46,100);border-left: 2px solid #FFFFFF;">在线</div>
                        </el-col>
                        <el-col :span="12">
                          <div class="grid-content bg-purple2">
                            <div style="transform: translateX(0%) translateY(28%);height: 25px;">剩余空间</div><hr style="background-color: rgb(21,46,100);height: 1px;border: none;">
                          </div>
                          <div style="margin-top: -69px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;line-height: 48px;border-right: 2px solid #FFFFFF;">54%</div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="camera3">
                      <el-row>
                        <el-col :span="12">
                          <div class="grid-content bg-purple2">
                            <div style="transform: translateX(0%) translateY(28%);height: 25px;">视频</div><hr style="background-color: rgb(21,46,100);height: 1px;border: none;">
                          </div>
                          <div style="margin-top: -69px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #1CF711;line-height: 48px;border-right: 2px solid rgb(21,46,100);border-left: 2px solid #FFFFFF;"><img
                            src="../../assets/imgs/videos.png"
                            style="width: 41px;height: 35px;"
                          ></div>
                        </el-col>
                        <el-col :span="12">
                          <div class="grid-content bg-purple2">
                            <div style="transform: translateX(0%) translateY(28%);height: 25px;">音频</div><hr style="background-color: rgb(21,46,100);height: 1px;border: none;">
                          </div>
                          <div style="margin-top: -69px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #1CF711;line-height: 48px;border-right: 2px solid #FFFFFF;"><img
                            src="../../assets/imgs/audios.png"
                            style="width: 66px;height: 33px;"
                          >
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-row>
                </div>
              </div>
              <div class="grid-content bg-purple" style="margin-top: 15px;">
                <div>
                  <img
                    src="../../assets/imgs/cs.jpg"
                    style="width: 100%;height: 455px;"
                  >
                </div>
              </div>
              <div class="grid-content bg-purple" style="margin-top: 15px;">
                <div class="total-item-inner3">
                  <div class="conten">
                    <el-row>
                      <el-col :span="24"><img class="video" src="../../assets/imgs/hj.png"><p style="color:#FFFFFF;font-size:5px;float: left;margin: 13px 43px;">环境监测</p></el-col>
                      <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
                    </el-row>
                    <el-row>
                      <div v-for="(item,index) in cameraList" :key="index+'camerajj'" class="camerajj">
                        <div style="height: 15%;margin-top: 13px;width: 260px;border-right: 2px solid rgb(255, 255, 255);border-left: 2px solid rgb(255, 255, 255);position: absolute;" />
                        <p style="margin: 13px 0px;"> {{ item.name }} </p>
                        <p style="color:#18E115;">在线</p>
                      </div>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="total-item-inner4">
                <powerSource :tribunal2="tribunalCode" />
                <!-- <div class="conten">
                  <el-row>
                    <el-col :span="24"><img class="video" src="../../assets/imgs/dy.png"><p style="color:#FFFFFF;font-size:5px;float: left;margin: 13px 43px;">电源</p></el-col>
                    <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
                    <div>
                      <p style="color:#FFFFFF;font-size:12px;float: left;margin: 13px 13px;">网络电源时序开关</p>
                      <div style="float: right;margin: 0 30px;">
                        <el-breadcrumb separator="|">
                          <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF">开</el-button></el-breadcrumb-item>
                          <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF">关</el-button></el-breadcrumb-item>
                        </el-breadcrumb>
                      </div>
                    </div>
                  </el-row>
                  <el-row>
                    <div v-for="(item, index) in cameraList" :key="index+'camera4'" class="camera4">
                      <p style="position: absolute;margin-left: 10px;">{{ index }}</p><br>
                      <p style="color:#18E115;"> 15.2瓦</p>
                      <p style="color:#FFFFFF;margin-left: 13px;">现在在线</p>
                    </div>
                  </el-row>
                </div> -->
              </div>
            </div>
            <div class="grid-content bg-purple">
              <div class="total-item-inner5" style="margin-top: 15px;">
                <div class="conten">
                  <el-row>
                    <el-col :span="24"><img class="video" src="../../assets/imgs/dy.png"><p style="color:#FFFFFF;font-size:5px;float: left;margin: 13px 43px;">IOT环控</p></el-col>
                    <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
                  </el-row>
                  <el-row>
                    <!-- <hr style="height: 1px;border: none;border-top:2px dotted rgb(21,46,100);"> -->
                    <div v-for="(item,index) in cameraList" :key="index+'camera5'" class="camera5">
                      <p style="color:#FFFFFF;font-size:12px;float: left;margin: 13px 13px;">网络电源时序开关</p>
                      <div style="float: right;margin: 0 30px;">
                        <el-breadcrumb separator="|">
                          <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF">开</el-button></el-breadcrumb-item>
                          <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF">关</el-button></el-breadcrumb-item>
                        </el-breadcrumb>
                      </div>
                      <!-- <p style="position: absolute;margin-left: 10px;">{{ index }}</p><br>
                      <p style="color:#18E115;"> 15.2瓦</p>
                      <p style="color:#FFFFFF;margin-left: 13px;">现在在线</p> -->
                    </div>
                  </el-row>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { selectTribunalByCourtCode } from '@/api/tribunal'
import camera from './camera.vue'
import powerSource from './powerSource.vue'
export default {
  name: '',
  components: {
    camera, powerSource
  },
  data() {
    return {
      week: null,
      times: null,
      times2: null,
      cameraList: [{
        name: '法官摄像头',
        cStatus: 1
      }, {
        name: '原告像头',
        cStatus: 1
      }, {
        name: '被告摄像头',
        cStatus: 2
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }],
      TribunalOptions: [],
      courtCode: null,
      tribunalCode: null
    }
  },
  created() {
    this.selectTribunalByCourtCode()
    this.interval()
  },
  methods: {
    handleTribunal(value) {
      this.tribunalCode = value
    },
    handleCommand(command) {
      this.$message('click on item ' + command)
    },
    interval() {
      setInterval(() => {
        // 同上
        this.getTime()
      }, 1000)
    },
    selectTribunalByCourtCode() {
      selectTribunalByCourtCode(this.courtCode).then(response => {
        this.TribunalOptions = response.data
        this.tribunalCode = this.TribunalOptions[0].id
      })
    },
    getTime() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      month >= 1 && month <= 9 ? (month = '0' + month) : ''
      day >= 0 && day <= 9 ? (day = '0' + day) : ''
      var h = date.getDay() - 1
      var we = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期七']
      this.week = we[h]
      this.times = year + '年' + month + '月' + day + '日 '
      this.times2 = hour + ' : ' + minute + ' : ' + second
    }
  }
}
</script>
<style lang="scss" scoped>
  .title1 {
    background-image: url('../../assets/imgs/title.png');
  }
 .el-header{
    // background-color: #083793;
    background-image: url('../../assets/imgs/title.png');
  }
  .title {
    width: auto;
    color: #FEFEFE;
    font-size: 30px;
    text-shadow:  0 0 10px #fff;
    text-align: center;
    line-height: 60px;
  }
  .time {
    position:absolute;
    font-size: 14px;
    margin-top: 33px;
    color: #BBDDFF;
  }
  .court {
    position: absolute;
    color: #BBDDFF;
    top: 30px;
    right: 36px;
    text-align: center;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #BBDDFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .bg-purple {
    background: #01001C;
    // background-image: linear-gradient(#1D399B,#01001C);
  }
  .bg-purple2 {
    // background: #011C53;
    // opacity: 0.7;
    background: rgb(1,28,83);
    height: 110px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .el-main {
    padding: 7px 20px;
    background: #01001F;
  }
  .total-item-inner{
          width: 100%;
          height: 248px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .total-item-inner5{
          width: 100%;
          height: 573px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .total-item-inner4{
          width: 100%;
          height: 389px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .total-item-inner2{
          width: 100%;
          height: 168px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .total-item-inner3{
          width: 100%;
          height: 322px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .conten{
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 30px #2243B2 inset
    }
    .bg-purple-dark {
      background: #787879;
    }
    .video{
      width: 16px;
      height: 16px;
      position: absolute;
      margin: 10px 20px;
    }
    .video2{
      position: absolute;
      width: 16px;
      height: 16px;
      margin: -3px -54px;
    }
    .cameras{
      color:#FFFFFF;
      font-size: 12px;
      width: 117px;
      height: 111px;
      background: #1D399B;
      // opacity: 0.2;
      border-radius: 4px;
      float: left;
      margin-left: 23px;
      margin-top: 15px;
    }
    .camera {
      width: 130px;
      height: 64px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-left: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#01001C,#1D399B);
    }
    .camerajj {
      width: 260px;
      height: 64px;
      text-align: center;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-left: 35px;
      margin-top: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#1D399B,#01001C);
    }
    .camera5 {
      width: 100%;
      height: 54px;
      text-align: center;
      font-size: 4px;
      color: #FFFFFF;
      float: left;
      // margin-left: 15px;
      border-radius: 5px;
      border: 1px dotted rgb(21,46,100);
      // background-image: linear-gradient(to top,#1D399B,#01001C);
    }
    .camera4 {
      width: 85px;
      height: 64px;
      text-align: center;
      font-size: 4px;
      color: #FFFFFF;
      float: left;
      // margin-left: 15px;
      border-radius: 5px;
      border: 1px dotted rgb(21,46,100);
      // background-image: linear-gradient(to top,#1D399B,#01001C);
    }
    .camera2 {
      width: 130px;
      height: 64px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-left: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#FFBEBE,#FD2A2A);
    }

    .camera3 {
      width: 46.5%;
      height: 110px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      text-align: center;
      margin-left: 25px;
      border-radius: 5px;
      // background-image: linear-gradient(to top,#FFBEBE,#FD2A2A);
    }

    .voiceStyle {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: #18489f;
      width: 34px;
      height: 7px;
      line-height:10px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .lowVoice {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: rgba(0, 162, 255, 0.8);
      width: 34px;
      height: 7px;
      line-height:10px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .inSound {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: #e79623;
      width: 34px;
      height: 7px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .highVoice {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: rgb(231, 77, 35);
      width: 34px;
      height: 7px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .voiceName {
      text-align: center;
      font-size: 12px;
      color: #ffffff;
      width: 100%;
      height: 10px;
      margin-top: 5px;
    }

   ::v-deep .el-input--suffix .el-input__inner {
        background: rgba(0,0,0,0);
        border-color: transparent;
        border: 1px solid rgba(0,0,0, 0);
        color: #BBDDFF;
    }
</style>
